<template>
	<view class="cash">
		<view style="color: #FFFFFF;width: 100%;text-align: center;margin-top: 100upx;">
			<view style="font-size: 32upx;">可抵扣金额</view>
			<view style="font-size: 58upx;margin: 20upx 0;">¥{{money * 0.01}}</view>
		</view>

		<view style="height: max-content;background-color: #FFFFFF;box-shadow: rgba(183, 183, 183, 0.3) 0px 1px 10px;margin: 40upx 20upx;border-radius: 20upx;padding-bottom: 20upx;">
			<view style="display: flex;flex-direction: row;padding: 30upx 20upx;">
				<view style="font-size: 38upx;color: #333333;font-weight: bold;">兑换信息确认</view>
			</view>

			<view style="padding: 0upx 20upx; margin: 20upx 20upx;background: #F5F5F5;height: 90upx;border-radius: 15upx;display: flex;">
				<input type="text" v-model="message" placeholder="兑换码:" style="font-size: 30upx;color: #333333;text-align: left;margin-left: 10upx;height: 90upx;" />
				<!-- <view style="width: 25%;text-align: center;line-height: 90upx;">一键粘贴</view> -->
			</view>

			<view style="background-image: url(../../static/img/zysc/duihuanbtn.png);background-size: 100%;height: 130upx;text-align: center;margin-top: 30upx;"
			 @click="goDuihuan">
				<view style="line-height: 120upx;font-size: 32upx;color: #FFFFFF;">立即兑换</view>
			</view>
		</view>
		
		<view style="border-radius:12px;border:1px solid rgba(238,238,238,1);position: relative;background: #FFFFFF;margin: 64upx 24upx 24upx 24upx;">
			<view style="text-align: center;margin-top: 32upx">
				<text class="news_title">一</text>
				<text style="font-size: 32upx;">兑换明细</text>
				<text class="news_title">一</text>
			</view>
			<view v-if="list.length==0" style="margin-top: 300upx;color: #999999;text-align: center;margin-bottom: 400upx;">暂无兑换记录</view>
			<view v-for="(item, index) in list" :key="index" style="padding: 32upx;border-bottom: 1upx solid #F0F0F0;font-size: 32upx;color: #666666;">
				<view style="display: flex;">
					<view style="width: 500upx;overflow: hidden;text-overflow: ellipsis;white-space:nowrap">{{item.cardName}}</view>
					<view class="jifen_number">+ {{ item.cardMoney * 0.01 }}</view>
				</view>
				<view style="margin-top: 4upx;color: #999999;font-size: 28upx;">{{ item.createTime }}</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				message: '',
				money: '0',
				page: 0,
				size: 10,
				list: [],
			};
		},
		onLoad: function() {
			let userId = this.$queue.getData('userId');
			if (userId) {
				this.getmoney();
				this.getMoneyDetail();
			}
			this.getClipboardData();
		},
		methods: {
			getClipboardData() {
				let that = this;
				uni.getClipboardData({
					success: function(res) {
						this.message = res.data;
						console.log(JSON.stringify(res));
					},
					fail: function(res) {
						console.log(JSON.stringify(res));
					}
				});
			},
			getMoneyDetail() {
				let that = this;
				let token = this.$queue.getData("token");
				let relation_id = this.$queue.getData('relation_id');
				let userId = this.$queue.getData("userId");
				if (token) {
					let data = {
						cardUserId: relation_id
					}
					//可以提现金额查询预估收入查询
					this.$Request.postJson("/couponCard/findAllCouponCard?page=" + that.page + "&size=" + that.size, data).then(res => {
						if (res.status === 0 && res.data) {
							if (that.page === 0 || res.status) {
								that.list = [];
							}
							res.data.content.forEach(d => {
								that.list.push(d);
							});
						}
					});
				}
			},
			getmoney() {
				let relation_id = this.$queue.getData('relation_id');
				let userId = this.$queue.getData('userId');
				this.$Request.postJson("/couponAmount/findCouponAmountByUserId?userId=" + relation_id).then(res => {
					if (res.status === 0 && res.data) {
						this.money = parseFloat(res.data.userDeductQuota).toFixed(2);
					} else {
						this.money = '0.00';
					}
				});
			},
			goDuihuan() {
				if (this.message == '') {
					this.$queue.showToast('请输入兑换码');
					return;
				}
				let relation_id = this.$queue.getData('relation_id');
				let userId = this.$queue.getData('userId');
				this.$Request.postJson('/couponCard/exchangeCouponCard?userId=' + relation_id + '&cardId=' + this.message).then(res => {
					if (res.status === 0) {
						this.$queue.showToast('兑换成功!');
						this.message = '';
						this.getMoneyDetail();
						this.getmoney();
					} else {
						this.$queue.showToast(res.msg);
					}
				});
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop > 200;
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getMoneyDetail('');
		},
		onPullDownRefresh: function() {
			this.page = 0;
			this.getMoneyDetail('Refresh');
		}
	};
</script>

<style lang="less" scoped>
	@import '../../static/css/index.css';

	page {
		background: #F2F2F2;
	}

	.cash {
		position: absolute;
		background-image: url(../../static/img/zysc/duihuanback.png);
		background-size: 100%;
		width: 100%;
		height: 370upx;
	}


	.news_title {
		font-weight: bold;
		color: #E67817;
		margin-right: 16px;
		margin-left: 16px;
		width: 6px;
	}

	.jifen_number {
		color: #ff7800;
		margin-left: 8upx;
	}
</style>
